<template>
  <div>
    <div class="main-head flex-between container-fluid">
      <div class="title">
        <h1 v-text="$t('pro.Creatives.CreativesName')"></h1>
      </div>
    </div>
    <div class="content container-fluid">
      <div class="breadcrumb">
        <a-breadcrumb :routes="routes">
          <template slot="itemRender" slot-scope="{route, params, routes}">
            <span v-if="routes.indexOf(route) === routes.length - 1">{{route.breadcrumbName}}
              <a-icon type="edit" theme="filled" style="font-size: 14px;margin-left: 5px;cursor: pointer" @click="handleSetCreatives" />
            </span>
            <router-link v-else :to="`${route.path}`">{{route.breadcrumbName}}</router-link>
          </template>
        </a-breadcrumb>
      </div>
      <creative-table :campaignsId="campaignsId"></creative-table>
    </div>
  </div>
</template>

<script>
import creativeTable from '@/components/common/creativeTable/creativeTable'

export default {
  data() {
    return {
      actionsVal: "Actions",
      updateValue: "",
      rootSubmenuKeys: ["sub1", "sub2", "sub4"],
      openKeys: ["sub1"],
    };
  },
  computed: {
      routes(){
          const routes = [
              {
                  path: "/bidder/campaigns",
                  breadcrumbName: this.$t('pro.public.header.Campaigns')
              },
              {
                  path: "first",
                  breadcrumbName: this.campaigns.name
              }
          ];
          if (routes[1].breadcrumbName === routes[0].breadcrumbName) {
              routes[1].breadcrumbName += ' '
          }
          return routes
      },
      campaigns() {
        return this.$store.getters.campaigns;
      },
      campaignsId() {
        return this.$route.params.id;
      }
  },
  methods: {
    handleSetCreatives(){
        //跳转到活动详情设置
        this.$router.push('/bidder/editcampaign/id/'+ this.campaignsId);
    },
    clearSelect(value){
        this.defaultActions = value
    },

    ActionsHandleChange(value) {
      this.actionsVal = value;
    },

    onSearch(value) {
      console.log(value);
    },
  },
  components:{
      creativeTable
  }
};
</script>


<style lang="less" scoped>
// @import "@/assets/css/colors.scss";
.ant-btn.ant-btn-loading:before {
  /* margin-left: -20px; */
  display: none;
}
.NotDuplicate{
  padding-bottom: 20px;
  background-color: #FBE1E3;
  color: #EF8088;
  margin-bottom: 20px;
}
.selectCreatives{
  grid-template-columns: repeat(3, auto);
}
h1,
h3 {
  margin-bottom: 0;
}
.buttongrid{
  justify-items: end;
  display: grid;
}
.Creativesgrid{
  width: 100%;
  grid-template-columns: 50% 47%;
}


@media screen and (max-width: 1200px) {
  .tools.flex-between {
    display: block;
    > div:not(:last-child) {
      margin-bottom: 10px;
    }
    .tools-r {
      display: flex;
      justify-content: flex-end;
      flex-wrap: wrap;
      align-items: center;
      > *:not(:first-child) {
        margin-left: 10px;
      }
      > * {
        margin-bottom: 5px;
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .tools.flex-between {
    display: block;
    > div:not(:last-child) {
      margin-bottom: 10px;
    }
    .tools-l {
      grid-template-columns: repeat(2, 1fr);
      > *:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
      }
      > *:nth-child(2) {
        grid-column: 2;
        grid-row: 1;
      }
      > *:nth-child(3) {
        grid-column: 3;
        grid-row: 1;
      }
      > *:nth-child(4) {
        grid-column: 1 / 4;
      }
    }
  }
}

@media screen and (max-width: 500px) {
  .tools.flex-between {
    .tools-l {
      grid-template-columns: repeat(2, 1fr);
      > *:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
      }
      > *:nth-child(2) {
        grid-column: 2;
        grid-row: 1;
      }
      > *:nth-child(3) {
        grid-column: 1;
        grid-row: 2;
      }
      > *:nth-child(4) {
        grid-column: 2;
        grid-row: 2;
      }
    }
  }
}

@media screen and (max-width: 320px) {
  .portlet {
    // background-color: #fff;
    padding: 12px 15px 15px;
  }
}

.ant-checkbox-wrapper:first-child {
  margin-left: 8px;
}

.setting-group {
  margin-bottom: 10px;
  grid-template-columns: 1fr 600px;
  .setting-group-wrapper {
    grid-column: 2;
    grid-row: 1;
    .checkbox-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
    }
    > button {
      margin-top: 10px;
    }
  }
}

@media screen and(max-width: 700px) {
  .setting-group {
    // display: grid;
    grid-template-columns: 1fr;
    .setting-group-wrapper {
      grid-column: 1;
      grid-row: 1;
      .checkbox-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }
  }
}
</style>

